<template>
  <el-row style="margin-top: 10px">
    <el-col :span="24">
      <el-table :data="data" style="width: 100%" border>
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-for="(item, index) in columns"
          :key="item.prop || index"
        >
          <template slot-scope="scope">
            <!-- <div v-if="item.slot">
              <render-dom :render="() => item.render(scope.row)"></render-dom>
            </div> -->
            <slot v-if="item.slot" :row="scope.row" :name="item.prop"></slot>
            <p v-else :style="{ color: item.color }">
              {{ scope.row[item.prop] }}
            </p>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" class="footer_pagin">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        background
        layout="total,  prev, pager, next, sizes, jumper"
        :total="500"
      >
      </el-pagination>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: [],
      require: true,
    },
    data: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: [],
    },
  },
  // components: {
  //   // 函数式组件注册
  //   renderDom: {
  //     functional: true,
  //     props: {
  //       render: Function,
  //     },
  //     render(createElement, renDom) {
  //       return <div>{renDom.props.render()}</div>;
  //     },
  //   },
  // },
  data() {
    return {
      currentPage4: 2,
    };
  },
  methods: {
    onChange(index, row, fn) {
      console.log(fn);
    },
  },
};
</script>

<style lang="less" scoped>
.btn_text {
  cursor: pointer;
}

.footer_pagin {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}

::v-deep .el-pager .number {
  border: 1px solid #ccc;
}
</style>
